export default ({ chartConfig, data, chartIns }) => {
  const xData = [];
  const yData = [];
  data.forEach(item => {
    xData.push(item[chartConfig.x_axis]);
    yData.push(item[chartConfig.y_axis]);
  });
  const maxYData = Math.max(...yData);
  const option = {
    tooltip: {
      show: true,
      trigger: 'axis',
      backgroundColor: 'rgba(50,50,50,0.7)',
      borderColor: 'rgba(50,50,50,0.7)',
      textStyle: {
        color: '#fff'
      },
      // 自定义提示框内容
      formatter: params => {
        const [param] = params;
        return `${param.name}<br/>${param.seriesName}: ${param.value}`;
      }
    },
    legend: {
      show: true,
      top: 0,
      left: 'left',
      textStyle: {
        fontFamily: 'PingFangSC-Regular',
        fontSize: 12,
        color: 'rgba(255,255,255,0.60)',
        fontWeight: 400
      },
      itemWidth: 20,
      itemHeight: 6
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.06)'
        }
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,0.6)',
          fontFamily: 'THS'
        }
      }
    },
    yAxis: {
      type: 'value',
      max: Math.floor(maxYData / 0.85),
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.06)'
        }
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,0.6)',
          fontFamily: 'THS'
        }
      }
    },
    series: {
      type: 'scatter',
      name: chartConfig.y_axis,
      data: yData,
      symbolSize: 10,
      itemStyle: {
        opacity: 0.7
      }
    },
    grid: {
      top: 40,
      right: 12,
      bottom: 0,
      left: 12,
      containLabel: true
    }
  };

  chartIns.play({
    option
  });
  return chartIns;
};
